const filter = document.querySelector('.filter')
const filter_more = document.querySelector('.filter_more')
filter_more.onmouseover = function(){
    filter.style.borderBottomColor = 'red'
}
filter_more.onmouseout = function(){
    filter.style.borderBottomColor = '#aaa'
}
filter_more.onselectstart = function(e){
    e.preventDefault()
}

let flag = true
const filter_line_ten = document.querySelector('.filter .line_ten')
filter_more.onclick = function(){
    if(flag){
        flag = false
        filter_more.innerText = ' 精简选项 '
        filter.style.height = 'auto'
        filter_line_four.style.borderBottom = ''
        filter_line_ten.style.borderBottom = '0'
        filter_more.className = 'filter_more filter_more_packup'
    }else{
        flag = true
        filter_more.innerText = ' 更多选项 '
        filter.style.height = ''
        filter_line_four.style.borderBottom = '0'
        filter_line_ten.style.borderBottom = ''
        filter_more.className = 'filter_more'
    }
}


const filter_line_more = document.querySelector('.filter .more')
const filter_line_pack_up = document.querySelector('.filter .pack_up')
const filter_line_four = document.querySelector('.filter .line_four')
filter_line_more.onclick = function(e){
    filter_line_four.style.height = 'auto'
    filter_line_more.style.display = 'none'
    filter_line_pack_up.style.display = 'block'
}
filter_line_pack_up.onclick = function(e){
    filter_line_four.style.height = ''
    filter_line_more.style.display = 'block'
    filter_line_pack_up.style.display = 'none'
}
filter_line_more.onselectstart = function(e){
    e.preventDefault()
}
filter_line_pack_up.onselectstart = function(e){
    e.preventDefault()
}
// const goods_lines = document.querySelectorAll('.list_of_goods ul')




// copy Pager_js
function ajax(url, cb){
    const xhr = new XMLHttpRequest;
    xhr.open("get", url, true)
    xhr.onload = function(){
        if(xhr.status === 200){
            cb(xhr.responseText)
        }
    }
    xhr.send();
}

class Page{
    constructor(ops){
        this.num = ops.num || 3;
        this.index = ops.index || 0;
        this.url = ops.url;
        this.prev = ops.prev;
        this.next = ops.next;
        this.cont = ops.cont;
        this.pageList = ops.pageList;
        this.sort_right = ops.sort_right;
        this.sort_way5 = ops.sort_way5;
        this.sort_way4 = ops.sort_way4;
        this.sort_way1 = ops.sort_way1;
        this.line_one_options = ops.line_one_options;
        this.classify_searchstr = ''

        this.load();
        this.addEvent();
    }
    addEvent(){
        const that = this;
        this.pageList.onclick = function(eve){
            const e = eve || window.event;
            const target = e.target || e.srcElement;
            if(target.tagName === "A"){// a标签名为大写 A
                that.setActive(target);
                that.index = (target.index);
                that.render();
                document.documentElement.scrollTop = 535
            }
        }
        this.prev.onclick = function(){
            if(that.index === 0){
                that.index = 0;
            }else{
                that.index--
            }
            that.render();
            that.setActive(that.pageList.children[that.index]);
            document.documentElement.scrollTop = 535
        }
        this.next.onclick = function(){
            if(that.index === that.maxPage-1){
                that.index = that.maxPage-1;
            }else{
                that.index++
            }
            that.render();
            that.setActive(that.pageList.children[that.index]);
            document.documentElement.scrollTop = 535
        }
        this.sort_way5.onclick = function(){
            ajax(`http://localhost:65535/sortGoodsPrice${location.search}${that.classify_searchstr}`, (res)=>{
                that.res = JSON.parse(res);
                that.render();
            })
        }
        this.sort_way4.onclick = function(){
            ajax(`http://localhost:65535/sortGoodsPopularity${location.search}${that.classify_searchstr}`, (res)=>{
                that.res = JSON.parse(res);
                that.render();
            })
        }
        this.sort_way1.onclick = function(){
            ajax(`http://localhost:65535/getGoods${location.search}${that.classify_searchstr}`, (res)=>{
                that.res = JSON.parse(res);
                that.render();
            })
        }
        this.line_one_options.onclick = function(e){
            switch(e.target.innerText){
                case '护肤':
                    ajax(`http://localhost:65535/goodsClassify${location.search}&classify=${e.target.innerText}`, (res)=>{
                        that.classify_searchstr = `&classify=${e.target.innerText}`
                        that.res = JSON.parse(res);
                        that.createPage();
                        that.render();
                    })
                    break
                case '彩妆':
                    ajax(`http://localhost:65535/goodsClassify${location.search}&classify=${e.target.innerText}`, (res)=>{
                        that.classify_searchstr = `&classify=${e.target.innerText}`
                        that.res = JSON.parse(res);
                        that.createPage();
                        that.render();
                    })
                    break
                case '洗浴护体':
                    ajax(`http://localhost:65535/goodsClassify${location.search}&classify=${e.target.innerText}`, (res)=>{
                        that.classify_searchstr = `&classify=${e.target.innerText}`
                        that.res = JSON.parse(res);
                        that.createPage();
                        that.render();
                    })
                    break
            }
        }

    }
    setActive(target){
        [...this.pageList.children].forEach(val=>{
            val.style.background = "none";
            val.style.color = "#000";
        })
        target.style.background = "black";
        target.style.color = "#fff";
    }
    load(){
        ajax(`http://localhost:65535/getGoods${location.search}`, (res)=>{
            this.res = JSON.parse(res);
            this.createPage();
            this.render();
        })
    }
    createPage(){
        this.maxPage = Math.ceil(this.res.length / this.num);

        let str = "";
        for(let i=0;i<this.maxPage;i++){
            str += `<a href="javascript:void(0)">${i+1}</a>`
            this.sort_right.children[2].innerText = i+1
        }
        this.pageList.innerHTML = str;

        for(let i=0;i<this.pageList.children.length;i++){
            this.pageList.children[i].index = i;
        }
        this.setActive(this.pageList.children[this.index]);
    }
    render(){
        let str = "";

        // 0~3      0index*3num ~ 0index*3num+3num
        // 3~6      1index*3num ~ 1index*3num+3num
        // 6~9      2index*3num ~ 2index*3num+3num
        // 9~12     3index*3num ~ 3index*3num+3num
        this.sub_str = function(j){
            str +=  `<li>
                        <a href="http://localhost:65535/index.html" style="background-image:url(${this.res[j].src});">
                            <span>
                                ${this.res[j].instock}
                            </span>                    
                        </a>
                        <div class="icon">
                            <span>${this.res[j].authentication}</span>
                        </div>
                        <div class="brand_name">ALGENIST</div>
                        <div class="goods_name">${ (j+1) + this.res[j].name}</div>
                        <div class="price">${this.res[j].price}</div>
                        <button class="add_cart" myid="${this.res[j].id}">加入购物车</button>
                    </li>`
        }
        for(
            let i = this.index * this.num;
            i < this.index * this.num + this.num;
            i += 5
        ){
            if(i < this.res.length){// width:221px;
                str += `<ul>`
                if(this.res[i]){
                    this.sub_str(i)
                    // str +=  `<li>
                    //             <a href="javascript:void(0)" style="background-image:${this.res[i].src};">
                    //                 <span>
                    //                     ${this.res[i].instock}
                    //                 </span>                    
                    //             </a>
                    //             <div class="icon">
                    //                 <span>${this.res[i].authentication}</span>
                    //             </div>
                    //             <div class="brand_name">ALGENIST</div>
                    //             <div class="goods_name">${ (i+1) + this.res[i].name}</div>
                    //             <div class="price">${this.res[i].price}</div>
                    //         </li>`
                }
                if(this.res[i+1]){
                    this.sub_str(i+1)
                }
                if(this.res[i+2]){
                    this.sub_str(i+2)
                }
                if(this.res[i+3]){
                    this.sub_str(i+3)
                }
                if(this.res[i+4]){
                    this.sub_str(i+4)
                }
                str+=`</ul>`
            }
        }
        this.cont.innerHTML = str;
        if(this.index>0){
            this.prev.style.color = '#000'
            // this.sort_right.children[3].style.color = '#000'
        }else{
            this.prev.style.color = '#A8A8A8'
            // this.sort_right.children[3].style.color = '#A8A8A8'
        }
        if(this.index < this.maxPage - 1){
            this.next.style.color = '#000'
            // this.sort_right.children[4].style.color = '#000'
        }else{
            this.next.style.color = '#A8A8A8'
            // this.sort_right.children[4].style.color = '#A8A8A8'
        }
        this.sort_right.children[0].innerText = this.index + 1
    }
}

new Page({
    url:"",
    num:20,
    index:0,
    prev:$(".page_prev"),
    next:$(".page_next"),
    cont:$(".list_of_goods"),
    pageList: $(".page_list"),
    sort_right:$(".sort_right"),
    sort_way5:$(".sort_way5"),
    sort_way4:$(".sort_way4"),
    sort_way1:$(".sort_way1"),
    line_one_options:$(".line_one .options")
})



class AddCart{
    constructor(){
        this.cont = $(".list_of_goods");
        this.addEvent();
        this.cart_num = $(".box2 a p em")
    }
    addEvent(){
        const that = this;
        this.cont.onclick = function(eve){
            const e = eve || window.event;
            const target = e.target || e.srcElement;
            if(target.className.includes("add_cart")){
                that.id = target.getAttribute("myid");
                that.price = target.previousElementSibling.innerHTML.substr(1);
                that.setLocal();
            }
        }
    }
    setLocal(){
        // localStorage.setItem("");

        // 多条商品？
        // 多个商品存一个存储，以数组的形式
        // 一个商品要存哪些数据？id，num，
        // 一个商品两个信息，以对象形式
        // 最终数据格式：[{id:1,num:1},{id:2,num4},{},...]

        // 一个商品点加入购物车两次
        // 如何得知一个商品被点击了多次，先判断数组中是否存在
        // 数组从哪来？先获取

        // 将来存什么，此时就读什么
        let goods = localStorage.getItem("goods");
        goods = goods ? JSON.parse(goods) : [];

        let i;
        const flag = goods.some((val,idx)=>{
            i = idx;
            return val.id === this.id;
        })

        if(flag){
            goods[i].num++
        }else{
            goods.push({
                id:this.id,
                num:1,
                price:this.price-0,
                check:false
            })
        }
        // 操作完数组后，一定要将数组存到本地存储中
        localStorage.setItem("goods", JSON.stringify(goods));
        
        
        this.cart_num.innerHTML = goods.reduce((prev,val)=> prev + val.num,0);
    }
}
new AddCart();





function $(select){
    return document.querySelector(select);
}